<template>
  <!-- 充值中心 -->
  <div class="person-info-container">
    <el-card style="width: 60%">
      <el-row class="flex-center">充值中心</el-row>
      <el-row>
        <el-form ref="formRef" :rules="rules" :model="personForm" label-width="120px">
          <el-form-item class="flex-per50" label="用户名">
            <el-input disabled v-model="personForm.username"></el-input>
          </el-form-item>
          <el-form-item class="flex-per50" label="姓名">
            <el-input :disabled="inputDisabled" v-model="personForm.nickname"></el-input>
          </el-form-item>
          <el-form-item class="flex-per50" label="邮箱">
            <el-input :disabled="inputDisabled" v-model="personForm.email"></el-input>
          </el-form-item>
          <el-form-item class="flex-per50" label="电话">
            <el-input :disabled="inputDisabled" v-model="personForm.phone"></el-input>
          </el-form-item>
          <el-form-item class="flex-per50" label="余额(元)">
            <el-input :disabled="inputDisabled" v-model="personForm.money"></el-input>
          </el-form-item>
          <el-form-item class="flex-per50" label="充值方式">
            <el-radio-group v-model="personForm.payWay">
              <el-radio
                :label="item.value"
                v-for="item in payList"
                :key="item.value"
              >{{ item.label }}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item class="flex-per50" label>
            <div class="pay-box">
              <div class="pay-item" v-for="(item, index) in payList" :key="index">
                <img :src="require(`@/assets/pay/${item.name}.png`)" alt />
              </div>
            </div>
          </el-form-item>
          <el-form-item class="flex-per50" label="充值(元)">
            <div class="store-box" style="display: flex; gap: 20px">
              <el-input v-model="storeMoney"></el-input>
              <el-button style="margin-left: 20px" type="primary" @click="confirm">充值</el-button>
            </div>
          </el-form-item>
        </el-form>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import { mapGetters, mapState } from "vuex";
import { generateTextAvatar } from "@/utils/generateTextAvatar";
import { getInfo, updateInfo } from "@/api/user";
export default {
  components: {},
  data() {
    return {
      payList: [
        {
          name: "weixin",
          value: 1,
          label: "微信支付",
        },
        {
          name: "zhifubao",
          value: 2,
          label: "支付宝支付",
        },
        {
          name: "jianshe",
          value: 3,
          label: "建设银行",
        },
        {
          name: "nongye",
          value: 4,
          label: "农业银行",
        },
        {
          name: "zhongguo",
          value: 5,
          label: "中国银行",
        },
        {
          name: "jiaotong",
          value: 6,
          label: "交通银行",
        },
      ],
      personForm: {
        username: null,
        password: null,
        nickname: null,
        email: null,
        phone: null,
        money: null,
        payWay: 1, //支付方式
      },
      storeMoney: 0, //充值金额
      rules: {},
      inputDisabled: true,
    };
  },
  computed: {
    ...mapState("user", ["token"]),
    ...mapGetters(["sidebar", "avatar", "name"]),
    // avatarImage() {
    //   return this.avatar
    //     ? this.avatar
    //     : generateTextAvatar({ text: this.name.slice(0, 1).toUpperCase() });
    // },
  },
  mounted() {
    if (!this.token) {
      this.$message.warning("请先登录,登录后再充值，1s后跳转到登录页！");
      return setTimeout(() => {
        this.$router.push("/login");
      }, 1000);
    }
    this.getUserInfo();
  },
  methods: {
    async getUserInfo() {
      const { data: res } = await getInfo(+this.token);
      this.personForm = res || {};

      this.$set(this.personForm, "payWay", 1);
    },
    async confirm() {
      this.$confirm(`您将充值${this.storeMoney}元, 是否继续?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          if (+this.storeMoney <= 0)
            return this.$message.error("充值金额必须大于0");
          if (!this.token) return this.$message.error("请先登录");
          const res = await updateInfo({
            user_id: +this.token,
            money: +this.storeMoney + this.personForm.money,
          });
          if (res.status == 0) {
            this.$message.success("充值成功");
            this.storeMoney = 0; //充值成功输入清零
            this.getUserInfo();
          } else {
            this.$message.error("充值失败");
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>

<style scoped lang="scss">
.person-info-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 50px;

  .el-card {
    padding: 20px;

    .flex-center {
      display: flex;
      justify-content: center;
      margin-bottom: 20px;
      margin-top: 50px;
    }
  }
}

.btn-list {
  display: flex;
  justify-content: center;

  .el-button {
    width: 200px;
  }
}

.pay-box {
  display: flex;
  gap: 20px;
  width: 684px;

  .pay-item {
    display: flex;
    align-items: center;
    flex: 1;

    img {
      display: inline-block;

      height: 50px;
    }
  }
}
</style>
